<template>
  <div class="RelationGraph">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in" appear>
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>
  
<script lang="ts" setup>


</script>
  
<style scoped lang="scss">
.RelationGraph {
  // margin: 0px;
  // padding: 0px;
  height: calc(100vh - 150px);
  // padding-top: 0px;
  // overflow-x: hidden;
  // overflow-y: scroll;
  // background-color: aqua;
}

.fade-leave-active,
.fade-enter-active {
  transition: all 0.5s;
}

/* 可能为enter失效，拆分为 enter-from和enter-to */
.fade-enter-from {
  opacity: 0;
  transform: translateY(-30px);
}

.fade-enter-to {
  opacity: 1;
  transform: translateY(0px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
  